<template>
    <el-dialog :visible.sync="invoiceDialog" width="90%" center>
        <el-container v-if="showInvoiceList" class="fill" style="background: #FFFFFF;">
            <el-header style="height: 32px;padding: 0 20px;justify-content: space-between;display: flex;">
                <span style="width: 60px;"></span>
                <el-button size="small" type="primary" icon="el-icon-refresh" @click="getInvoiceTemp">刷新</el-button>
            </el-header>
            <el-main style="padding: 0 20px;">
                <el-form style="width: 400px;margin: 0 auto;">
                    <el-form-item label="发票类型:" class="text_l">
                        <div>
                            <el-radio-group v-model="invoiceType" @change=changeRadios>
                                <el-radio label="0">个人普票</el-radio>
                                <el-radio label="1">企业普票</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                </el-form>
                <el-table v-if="!String.isEmptyOrNUll(invoiceType)" :data="invoiceLst" class="table" :show-header="true"
                    :border="true" :fit="true" highlight-current-row @row-click="rowClick">
                    <el-table-column align="center" label="" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-radio class="elradio" :label="scope.$index" v-model="templateRadio" @change.native="radioClick(scope.$index,scope.row)">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="invoiceTitle" label="名 称" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="taxRegistryNo" label="纳税人识别号" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="ObAndAn" label="开户行及账号" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="AddAndTel" label="地 址、电 话" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="receivingInformation" label="收货地址及号码" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="操作" style="width: 3.75rem;">
                        <template slot-scope="scope">
                            <a style="color: #ff0000;" class="hand" @click="deleteInvoice(scope.row.id)" title="删除"><i
                                    class="el-icon-delete"></i></a>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="justify-content: center;margin-top: 20px;" class="text_center">
                    <el-button type="primary" @click="showInvoiceList=false" size="medium">新增</el-button>
                    <el-button type="primary" @click="onSubmit" size="medium">确认</el-button>
                </div>
            </el-main>
        </el-container>
        <div v-if="!showInvoiceList">
            <invoiceCreate @closeDialog="closeDialog"></invoiceCreate>
        </div>
    </el-dialog>
</template>

<script>
    var _this;
    import invoiceCreate from './invoice_create.vue'
    export default {
        data() {
            return {
                invoiceDialog: false,
                showInvoiceList: true,
                templateRadio: "",
                invoiceLst: [],
                form: {},
                invoiceCurr: {},
                invoiceType: '0',
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            // this.getInvoiceTemp();
        },
        methods: {
            changeRadios: function(e) {
                this.invoiceType = e;
                this.templateRadio = "";
                this.form = {};
                this.getInvoiceTemp(this.invoiceType);
            },
            rowClick: function(data) {
                // console.log(data);
                var index = this.invoiceLst.indexOf(data, "id");
                this.radioClick(index, data);
            },
            radioClick: function(index, data) {
                this.templateRadio = index;
                this.tableRadioChange(data)
            },
            closeDialog: function(data) {
                this.showInvoiceList = true;
                this.getInvoiceTemp();
            },
            getInvoiceTemp: function() {
                this.invoiceDialog = true;
                if (String.isEmptyOrNUll(this.invoiceType)) {
                    this.$message.error("请选择发票类型！");
                    return;
                }
                _this.invoiceLst = [];
                this.common.post(this.api.getInvoiceTemp, {
                    invoiceType: this.invoiceType
                }, function(res) {
                    if (res.resultMap != undefined && res.resultMap.length > 0) {
                        let myInvoiceLst = res.resultMap;
                        myInvoiceLst.map((item, index) => {
                            // 发票
                            item.ObAndAn =
                                `${item.invoiceBank != undefined ? item.invoiceBank : "" } ${item.invoiceAccount != undefined ? item.invoiceAccount: ""}`
                            item.AddAndTel =
                                `${item.invoiceAddress != undefined ? item.invoiceAddress : ""} ${item.invoicePhone != undefined ? item.invoicePhone : ""}`
                            // 收货
                            item.receivingInformation =
                                `${item.mailingAddress == undefined ? "" : item.mailingAddress}  ${item.mailingConsignee == undefined ? "" : item.mailingConsignee}  ${item.mailingConsigneephone == undefined ? "" : item.mailingConsigneephone}`
                            return item
                        })
                        _this.invoiceLst = myInvoiceLst;
                    } else {
                        _this.$message.error("当前暂无发票信息,请添加！");
                    }
                });
            },
            tableRadioChange: function(data) {
                this.form = data;
                this.form.invoiceTempId = data.id;
            },
            deleteInvoice: function(id) {
                this.common.post(this.api.delInvoiceTemp, {
                    id: id
                }, function(res) {
                    _this.$message.success('删除成功！');
                    _this.getInvoiceTemp();
                }, function(error) {
                    _this.$message.error(error.resultMsg);
                });
            },
            onSubmit: function() {
                if (String.isEmptyOrNUll(this.form.invoiceTempId)) {
                    this.$message.error("请选择发票！");
                    return;
                }
                if (String.isEmptyOrNUll(this.invoiceType)) {
                    this.$message.error("请选择发票类型！");
                    return;
                }
                this.form.invoiceType = this.invoiceType;
                this.$emit("ticketDialogBtn", this.form);
                this.invoiceDialog = false;
            }
        },
        components: {
            invoiceCreate
        }
    }
</script>

<style>
    .elradio .el-radio__inner{
        border:1px solid #000000;
    }
</style>
<style scoped="scoped">
    .el-dialog__header {
        padding: 0;
    }
</style>
